<template>
  <div class="main-box">
    <img src="../../assets/images/返回.png" alt="" class="back" @click="back">
    <div class="item-box" v-for="(item) in songs" :key="item.id" >
      <SongsItem :data="item"></SongsItem>
    </div>
  </div>
</template>

<script>
import SongsItem from "./components/SongsItem";
export default {
  name: "Detail",
  components: {
    SongsItem
  },
  computed: {
    id() {
      return this.$route.query.id;
    }
  },
  mounted() {
    this.axios.get(`/playlist/detail?id=${this.id}`).then(res => {
      this.songs = res.data.playlist.tracks;
    });
  },
  data() {
    return {
      songs: []
    };
  },
  methods:{
    back(){
      this.$router.back();
    }
  }
};
</script>

<style scoped>
.main-box{
  display: flex;
  flex-direction: column;
}
.back{
  width:60px;
  height: 60px;
  margin-left: 25px;
  margin-top:25px;
}
.main-box{
  position: absolute;
  z-index: 100;
  min-height: 100%;
  width: 100%;
  top:0;
  left: 0;
  background:-webkit-linear-gradient(top, rgb(240,125,125)0%,rgb(225,237,195)100%);
   
}
</style>